<mat-card class="book-card" *ngFor="let book of bookList"
        fxFlex.gt-md="0 1 calc(25% - 10px)"
        fxFlex.xl="0 1 calc(10% - 10px)"
        fxFlex.gt-sm="0 1 calc(33% - 10px)"
        fxFlex="0 1 calc(50% - 10px)"> 
    <ion-badge color="warning" 
               style="position: absolute; right: -5px; top: -10px;" 
               *ngIf="book.recordList && book.recordList.length > 0">
        {{book.recordList.length}} {{'home.bookList.readTimes' | translate}}
    </ion-badge>
    <mat-card-title>{{(book.name.length > 24 ? book.name.slice(0,23)+'...' : book.name) | uppercase}}</mat-card-title>

    <!-- 作者和来源 -->
    <mat-card-header>
        <img mat-card-avatar 
             (error)="onImageError($event)"
             [src]="book.isFromMainstreamPlatform ? book.writer.avatarUrl : 'assets/images/avatar.png'" />
        <mat-card-title>
            {{book.writer.fullName.length > 0 ? book.writer.fullName : book.writer.name}}
        </mat-card-title>
        <mat-card-subtitle>
            <ion-icon *ngIf="book.writer.location.length > 0" name="location-outline"></ion-icon>
            {{book.writer.location}} @{{book.website.uri}}
        </mat-card-subtitle>
    </mat-card-header>

    <mat-card-content *ngIf="book.desc.length > 0" class="description">
        <mat-label><b>“</b>{{book.desc.length > 256 ? book.desc.slice(0,256)+'...' : book.desc}}<b>”</b></mat-label>
    </mat-card-content>

    <mat-card-content fxLayout="row" fxLayoutGap="5px" class="cate-list">
        <mat-chip-list>
            <mat-chip class="cate-chip" *ngFor="let cate of book.cateList" (click)="listBooksUnderCate(cate)">
                <ion-label>{{cate.name}}</ion-label>
            </mat-chip>
            <button class="modify-cate-list" (click)="openEditBookCateListDialog(book)" mat-button>
                <ion-icon name="cog-outline"></ion-icon>{{'home.bookList.modify' | translate}}
            </button>
        </mat-chip-list>
    </mat-card-content>

    <!-- 操作 -->
    <mat-card-actions fxLayout="row" fxLayoutGap="0px" fxLayoutAlign="end start">
        <button class="action-button" mat-button *ngIf="book.recordList && book.recordList.length > 0" 
                (click)="openReadingRecordDialog(book)">
            <ion-icon name="list-outline"></ion-icon>{{'home.bookList.readingRecord' | translate}}
        </button>
        <button class="action-button" mat-button *ngIf="book.downloaded" (click)="openBook(book)">
            <ion-icon name="book-outline"></ion-icon>{{'home.bookList.actions.read' | translate}}
        </button>
        <button class="action-button" id="{{ 'download-book-' + book.id }}" mat-button 
                *ngIf="!book.downloaded" (click)="startDownload(book)">
            <ion-icon name="cloud-download-outline"></ion-icon>{{'home.bookList.actions.download' | translate}}
        </button>
        <button class="action-button" 
                matTooltip="{{'home.bookList.tooltip.remove' | translate}}"
                id="{{ 'delete-book-' + book.id }}" mat-button (click)="openDeleteBookDialog(book)" 
                *ngIf="!book.downloaded || !book.recycled"
                [disabled]="book.recycled">
            <ion-icon name="close-outline" sizme="small"></ion-icon>{{'home.bookList.actions.remove' | translate}}
        </button>
        <button class="action-button" 
                matTooltip="{{'home.bookList.tooltip.operation' | translate}}"
                mat-button 
                *ngIf="book.recycled" 
                (click)="openDeleteBookDialog(book)">
            <ion-icon name="cog-outline" sizme="small"></ion-icon>{{'home.bookList.actions.operation' | translate}}
        </button>
    </mat-card-actions>

    <mat-card-content *ngIf="book.errMsg">
        <ion-text color="danger">{{book.errMsg}}{{'home.bookList.cloneErrorMsg' | translate}}</ion-text>
    </mat-card-content>
</mat-card>
